<template>
	<view class="indexs" style="    position: relative;max-width: 500px;">
		<view class="header header_lan" :style="'padding-top: ' + navH + 'px;'">
			<view class="header_height"
				:style="'height:' + gaodu + 'px;line-height:' + gaodu + 'px;top:' + gaodutops + 'px;'">
				<view class="index_h_cont3">
					<view class="index_wenben_img" @tap="jumpzuo">
						<image :src="imgUrl + '/dzx_img22.png'" mode="widthFix"></image>
					</view>
					<view class="index_wenben baise">{{ $t('page_my_dingdan.my_order') }}</view>
				</view>
			</view>
			<view class="coloe_title">s</view>
		</view>
		<view class="index_center" :style="'padding-top:' + (navH + 50) + 'px;'">
			<view class="my_dingdan_center">
				<view class="index_cardingdan">
					<view class="index_swiper">
						<!--Tab布局-->
						<view class="index_title">
							<block v-for="(item, index) in malllist" :key="index">
								<view :data-id="index" :data-type="item.type"
									:class="'mall_dis ' + (currentIndex == index ? 'mall_on' : '')" @tap="getcurrentid">
									<view class="mall_t1">{{ item.name }}</view>
								</view>
							</block>
							<view class="mys_xians_po" :style="'width:' + width + 'px;left:' + left + 'px;'">
								<view class="mys_xians"></view>
							</view>
						</view>
						<!--内容布局-->
						<view class="index_list">
							<swiper class="swiper paid_list_cont" @change="pagechange" :current="currentIndex"
								data-dtype="10" :style="'height:' + height + ';'">
								<block v-for="(item, index) in malllist" :key="index">
									<swiper-item>
										<view :class="'index_list_heji' + index">
											<view class="index_cardingdan_center">
												<view class="my_dingdan_list" v-if="arrlist.length != 0">
													<view class="my_dingdan_cont" v-for="(item, index1) in arrlist"
														:key="index1">
														<view class="my_dingdan_title">
															<view class="my_dingdan_l">
																<image :src="imgUrl + '/dzx_img24.png'"></image>
																<text>{{item.storage && item.storage.shop_name }}</text>
															</view>
															<view class="my_dingdan_r" v-if="item.status == 1"
																style="color: #f33653">
																{{ $t('page_my_dingdan.to_be_checked') }}
															</view>
															<view class="my_dingdan_r"
																v-if="item.status == 2 && item.is_pay == 2"
																style="color: #f33653">
																{{ $t('page_my_dingdan.to_be_paid') }}
															</view>
															<view class="my_dingdan_r"
																v-if="item.status == 3 && item.is_pay == 1">
																{{ $t('page_my_dingdan.paid') }}
															</view>
															<view class="my_dingdan_r" v-if="item.status == 4">
																{{ $t('page_my_dingdan.picking') }}
															</view>
															<view class="my_dingdan_r" v-if="item.status == 5">
																{{ $t('page_my_dingdan.packing') }}
															</view>
															<view class="my_dingdan_r" v-if="item.status == 6">
																{{ $t('page_my_dingdan.shipped') }}
															</view>
															<view class="my_dingdan_r" v-if="item.status == 7">
																{{ $t('page_my_dingdan.received') }}
															</view>
															<view class="my_dingdan_r" v-if="item.status == 8">
																{{ $t('page_my_dingdan.completed') }}
															</view>
															<view class="my_dingdan_r" v-if="item.status == -1">
																{{ $t('page_my_dingdan.problem_piece') }}
															</view>
														</view>
														<view class="my_dingdan_title">
															<view class="my_dingdan_l">
																<image :src="imgUrl + '/dzx_img27.png'"></image>
																<text>
																	{{
																		$t('page_my_dingdan.parcel_no_num', {
																			num: item.order_sn
																		})
																	}}
																</text>
																<view style="color:#4ad5ac;margin-left:20rpx;font-size: 22rpx;" @click="fuzhi(item.order_sn)">
																	{{ $t('page_my_dingdan.copy_tracking_number') }}
																</view>
															</view>
														</view>
														<view class="my_dingdan_txtlist">
															<view class="my_dingdan_txtcont" v-if="item.status == 6">
																{{ $t('page_my_dingdan.tnternational_tracking_number') }}：
																<text>{{ item.order_sn ? item.order_sn : $t('page_my_dingdan.not_yet_generated') }}</text>
															</view>
															<view class="my_dingdan_txtcont" v-if="item.country">
																{{ $t('page_my_dingdan.shipping_country') }}：
																<text>{{item.country.title }}</text>
															</view>
															<view class="my_dingdan_txtcont">
																{{ $t('page_my_dingdan.number_of_packages') }}：
																<text>{{ item.num }}</text>
															</view>
															<!-- <view class="my_dingdan_txtcont">
																{{ $t('page_my_dingdan.chargeable_weight') }}：
																<text>
																	{{
																		$t('page_my_dingdan.statistics', {
																			long: `${item.length}${setting.size_mode.unit}`,
																			width: `${item.width}${setting.size_mode.unit}`,
																			height: `${item.height}${setting.size_mode.unit}`,
																			weight: `${item.cale_weight}${item.weight_unit[item.line?item.line.line_type_unit:10]}`
																		})
																	}}
																</text>
															</view>
															<view class="my_dingdan_txtcont" v-if="item.status != 1">
																{{ $t('page_my_dingdan.payment_method') }}：
																<text>{{ item.is_pay_type.text }}</text>
															</view> -->
															<view class="my_dingdan_txtcont">
																{{ $t('page_my_dingdan.reporting_time') }}：
																<text>{{ item.created_time }}</text>
															</view>
															<view class="my_dingdan_txtcont" v-if="item.sendout_time">
																{{ $t('myorder.发货时间') }}：
																<text>{{ item.sendout_time }}</text>
															</view>
															<view class="my_dingdan_txtcont" v-if="item.shoprk_time">
																{{ $t('myorder.到货时间') }}：
																<text>{{ item.shoprk_time }}</text>
															</view>
															<view v-if="item.status == 2" class="my_dingdan_txtcont">
																{{ $t('page_my_dingdan.payment_amount') }}：
																<text
																	style="color: #f33653">{{ item.total_free }}{{ price_mode.unit }}</text>
															</view>
															<view v-if="item.remark" class="my_dingdan_txtcont">
																{{ $t('page_checkorderdetail.order_note') }}：
																<text style="color: #f33653">{{ item.remark }}</text>
															</view>
															<!-- 图片信息 -->
															<!-- <view class="my_dingdan_details_item2_list pcicang">
																<view class="my_dingdan_details_item2_cont">
																	<view class="index_item5_cont_bottom_img"
																		:data-url="xiangqingdetail"
																		v-if="xiangqingdetail.inpackimage != ''"
																		@click="previewImage">
																		<view class="index_item5_cont_bottom_imgs"
																			v-for="(item, index1) in xiangqingdetail.inpackimage"
																			:key="index1" :data-url="item"
																			:data-index="index1" @click="getIndex">
																			<image :src="item && item.file_path"
																				mode="aspectFill"></image>
																		</view>
																	</view>
																</view>
															</view> -->
														</view>

														<view class="my_dingdan_btns">
															<view class="my_dingdan_btns1"
																v-if="item.status <= 5 && item.status != -1"
																@tap="quxiaodingdan" :data-id="item.id">
																{{ $t('page_my_dingdan.cancel_order') }}
															</view>

															<view class="my_dingdan_btns1" @tap="chakanxq"
																:data-id="item.id">
																{{ $t('page_my_dingdan.check_details') }}
															</view>
															<!-- :data-name="item.t_order_sn" -->
															<view class="my_dingdan_btns1" @click="fuzhi(item.order_sn)">
																{{ $t('page_my_dingdan.copy_tracking_number') }}
															</view>
															<view class="my_dingdan_btns2" @tap="chakanxq"
																:data-id="item.id"
																v-if="item.status == 2 || (item.status != 1 && item.is_pay == 2)">
																{{ $t('page_my_dingdan.to_pay') }}
															</view>
															<view class="my_dingdan_btns2"
																v-if="item.status>5 && item.is_comment == 0"
																@tap="qupinglun" :data-id="item.id">
																{{ $t('page_my_dingdan.to_comment') }}
															</view>
															<view class="my_dingdan_btns3" v-if="item.status == 6"
																@tap="querenqianshou" :data-id="item.id">
																{{ $t('page_my_dingdan.confirm_receipt') }}
															</view>
														</view>
													</view>
												</view>
												<view class="my_dingdan_zanwu" v-else>
													<image :src="imgUrl + '/dzx_img43.png'"></image>
													<text>{{ $t('page_my_dingdan.no_order_yet') }}</text>
												</view>
											</view>
										</view>
									</swiper-item>
								</block>
							</swiper>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// pages/shouye/shouye_zkc/shouye_zkc.js
	const app = getApp();

	let request = require('../../../utils/require');

	export default {
		data() {
			return {
				navH: app.globalData.navHeight,
				gaodu: app.globalData.height,
				gaodutops: app.globalData.top,
				imgUrl: app.globalData.imgUrl,
				weight_mode: uni.getStorageSync('weight_mode'),
				price_mode: uni.getStorageSync('price_mode'),
				setting: uni.getStorageSync('setting'),
				malllist: [{
					id: 1,
					name: this.$t('myorder.全部'),
					type: 'all',
					// 修改 隐藏了
					// },
					// {
					// 	id: 2,
					// 	name: this.$t('myorder.待查验'),
					// 	type: 'verify'
					// },
					// {
					// 	id: 3,
					// 	name: this.$t('myorder.待付款'),
					// 	type: 'nopay'
					// },
					// {
					// 	id: 4,
					// 	name: this.$t('myorder.待发货'),
					// 	type: 'no_send'
					// },
					// {
					// 	id: 5,
					// 	name: this.$t('myorder.已发货'),
					// 	type: 'send'
					// },
					// {
					// 	id: 7,
					// 	name: this.$t('myorder.已到货'),
					// 	type: 'reach'
					// },
					// {
					// 	id: 6,
					// 	name: this.$t('myorder.已完成'),
					// 	type: 'complete'
				}],

				height: 0,
				heights: 0,
				currentIndex: 0,
				left: 16,
				false: false,
				width: 0,

				//分页
				page: 1,
				rtype: 0,
				ispage: true,
				arrlist: [],
				type: 0,
				isSwiper: false,
				optionsid: '',
				swipertrue: false,
				swipershow: false
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			var that = this;
			// this.type = options.type ? options.type : 0
			this.optionsid = options.id ? options.id : 0
		},
		onShow() {
			var that = this;
			console.log(that.type, 'that.data.type');
			// that.currentIndex = that.optionsid
			that.page = 1,
			that.ispage = true
			that.arrlist = []
			that.isSwiper = true
			if (that.type == 0) {
				that.baoguolist(that.type);
			} else if (that.rtype == 10) {
				that.baoguolist(that.type);
			}
			// #ifdef H5
			that.baoguolist(that.type);
			// #endif

		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function(options) {
			var that = this;
			that.page = 1
			that.ispage = true
			that.arrlist = []
			that.swipertrue = false
			that.changeline();
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			if (this.ispage) {
				this.page = this.page + 1
				this.baoguolist(this.type);
			}
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			previewImage(e) {
			  var len = e.currentTarget.dataset.url.inpackimage.length;
			  console.log(len, 88888);
			  var artimages = this.artimages;
			  for (var i = 0; i < len; i++) {
			    artimages[i] = e.currentTarget.dataset.url.inpackimage[i].file_path;
			  }
			  uni.previewImage({
			    current: this.imgindex,
			    urls: this.artimages,
			  });
			},
			getIndex(e) {
			  this.imgindex= e.currentTarget.dataset.index
			},
			//复制
			fuzhi(e) {
				console.log(e,"花花")
				let that = this
				// var card = e.currentTarget.dataset.card;
				var card = e;
				uni.setClipboardData({
					data: card,
					success: function(res) {
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: that.$t('page_other.复制成功')
								});
							}
						});
					}
				});
			},
			qupinglun(e) {
				uni.navigateTo({
					url: '/pages/indexs/my_dingdan_qpj/my_dingdan_qpj?id=' + e.currentTarget.dataset.id
				});
			},

			querenqianshou(e) {
				var that = this;
				uni.showModal({
					title: that.$t('page_other.提示'),
					content: that.$t('page_other.确认签收该包裹？'),

					success(res) {
						if (res.confirm) {
							var data = {
								token: uni.getStorageSync('token'),
								id: e.currentTarget.dataset.id
							};
							request.post(`index.php?s=/api/package/signedin&wxapp_id=` + uni.getStorageSync(
								'web_id'), data).then(res => {
								if (res.data.code == 1) {
									uni.showToast({
										title: res.data.data
									});
									setTimeout(() => {
										that.page = 1
										that.ispage = true
										that.arrlist = []
										that.baoguolist(that.type);
									}, 1000);
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									});
								}
							});
						} else {
							if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					}
				});
			},
			// quzhifu(e) {
			//     var that = this;
			//     uni.showModal({
			//         title: '提示',
			//         content: '确认是否支付？',

			//         success(res) {
			//             if (res.confirm) {
			//                 var data = {
			//                     token: uni.getStorageSync('token'),
			//                     id: e.currentTarget.dataset.id
			//                 };
			//                 request.post(`index.php?s=/api/package/doPay&wxapp_id=` + uni.getStorageSync('web_id'), data).then((res) => {
			//                     if (res.data.code == 1) {
			//                         uni.showToast({
			//                             title: res.data.data
			//                         });
			//                         setTimeout(() => {
			//                             that.setData({
			//                                 page: 1,
			//                                 ispage: true,
			//                                 arrlist: []
			//                             });
			//                             that.baoguolist(that.type);
			//                         }, 1000);
			//                     } else {
			//                         uni.showToast({
			//                             title: res.data.msg,
			//                             icon: 'none'
			//                         });
			//                     }
			//                 });
			//             } else {
			//                 if (res.cancel) {
			//                     console.log('用户点击取消');
			//                 }
			//             }
			//         }
			//     });
			// },

			//取消订单
			quxiaodingdan(e) {
				var that = this;
				var data = {
					token: uni.getStorageSync('token'),
					id: e.currentTarget.dataset.id
				};
				uni.showModal({
					title: that.$t('page_other.取消订单提示'),
					editable: true,
					placeholderText: that.$t('page_other.请输入取消原因...'),
					success(res) {
						if (res.confirm) {
							data.reason = res.content;
							request.post(`index.php?s=/api/package/canclePack&wxapp_id=` + uni.getStorageSync(
								'web_id'), data).then(res => {
								if (res.data.code == 1) {
									uni.showToast({
										title: res.data.data
									});
									setTimeout(() => {
										that.page = 1
										that.ispage = true
										that.arrlist = []
										that.baoguolist(that.type);
									}, 1000);
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									});
								}
							});
						} else {
							if (res.cancel) {}
						}
					}
				});
			},

			baoguolist(e) {
				var that = this;
				var data = {
					type: e,
					token: uni.getStorageSync('token'),
					page: that.page
				};
				if (uni.getStorageSync("usermark")) {
					data['usermark'] = uni.getStorageSync("usermark").mark;
				}
				request.get(`index.php?s=/api/package/packageListPlus&wxapp_id=` + uni.getStorageSync('web_id'), data)
					.then(
						res => {
							console.log(res.data.data.last_page, 8899);

							if (res.data.code == 1) {
								console.log(res.data.data.last_page, 76544);
								if (that.page > res.data.data.last_page) {
									console.log(77777777777777);
									that.ispage = false
								} else {
									that.arrlist = that.arrlist.concat(res.data.data.data)
								}
								console.log(that.arrlist, 999);
								setTimeout(() => {
									that.swiperhegiht(that.currentIndex);
								}, 300);
							}
						});
			},

			chakanxq(e) {
				uni.navigateTo({
					url: '/pages/indexs/my_dingdan_details/my_dingdan_details?id=' + e.currentTarget.dataset.id
				});
			},

			//swiper切换时会调用
			pagechange: function(e) {
				var that = this;
				console.log(e, '9994499999');
				setTimeout(() => {
					that.currentIndex = e.detail.current
					that.type = that.malllist[e.detail.current].type
					that.page = 1
					that.rtype = e.currentTarget.dataset.dtype
					that.ispage = true
					that.arrlist = []
					that.optionsid = e.detail.current
					that.swipershow = true
					that.baoguolist(that.type);
					that.changeline();
				}, 100);
			},

			//swiper单击事件
			getcurrentid(e) {
				this.currentIndex = e.currentTarget.dataset.id
			},

			//swiper选项卡的高度
			swiperhegiht(es) {
				var that = this;
				var query = uni.createSelectorQuery();
				query.selectAll('.index_list_heji' + es).boundingClientRect();
				query.exec(res => {
					var listHeight = res[0][0].height;
					that.height = listHeight + 'px'
					that.heights = res[0]
				});
			},

			//下标线左右滑动效果
			changeline: function() {
				const query = uni.createSelectorQuery();
				var that = this;

				query.select('.mall_on').boundingClientRect();

				query.exec(function(res) {
					console.log(res, '????');
					if (res[0] != null) {
						that.left = res[0].left
						that.width = res[0].width
					} else {
						that.left = 0
					}
				});
			},

			jumpzuo() {
				uni.navigateBack();
			}
		}
	};
</script>
<style>
	@import './my_dingdan.css';
</style>